<script setup lang="ts">
import { ref } from 'vue'
import { ElSwitch, ElTooltip, ElDrawer, ElDivider } from 'element-plus'
import { QuestionFilled, Setting } from '@element-plus/icons-vue'

// 主题切换
const isDarkMode = ref(true)

// 设置抽屉
const settingsDrawer = ref(false)

// 切换主题
const toggleTheme = (value: boolean) => {
  isDarkMode.value = value
  document.documentElement.classList.toggle('dark-mode', value)
  document.documentElement.classList.toggle('light-mode', !value)
}

// 打开设置
const openSettings = () => {
  settingsDrawer.value = true
}

// 打开帮助
const openHelp = () => {
  settingsDrawer.value = true
}
</script>

<template>
  <header class="header">
    <div class="logo">
      <span class="logo-text">JSON Streaming</span>
      <span class="version">v1.0</span>
    </div>
    
    <div class="header-actions">
      <div class="theme-switch">
        <span>🌙</span>
        <el-switch
          v-model="isDarkMode"
          @change="toggleTheme"
          inline-prompt
        />
        <span>☀️</span>
      </div>
      
      <el-tooltip content="设置">
        <el-button :icon="Setting" circle @click="openSettings" />
      </el-tooltip>
      
      <el-tooltip content="帮助">
        <el-button :icon="QuestionFilled" circle @click="openHelp" />
      </el-tooltip>
    </div>
    
    <!-- 设置抽屉 -->
    <el-drawer
      v-model="settingsDrawer"
      title="设置 & 帮助"
      direction="rtl"
      size="300px"
    >
      <div class="drawer-content">
        <section>
          <h3>设置</h3>
          <div class="setting-item">
            <span>深色模式</span>
            <el-switch v-model="isDarkMode" @change="toggleTheme" />
          </div>
        </section>
        
        <el-divider />
        
        <section>
          <h3>帮助</h3>
          <div class="help-content">
            <p><strong>JSON Streaming</strong> 是一个用于处理和可视化JSON数据的工具。</p>
            
            <h4>功能：</h4>
            <ul>
              <li>解析和验证JSON数据</li>
              <li>可视化展示JSON结构</li>
              <li>支持文件上传和URL导入</li>
              <li>搜索和过滤JSON内容</li>
            </ul>
            
            <h4>使用方法：</h4>
            <ol>
              <li>在左侧输入区域输入、上传或导入JSON数据</li>
              <li>点击"解析"按钮处理数据</li>
              <li>在右侧查看器中浏览JSON结构</li>
              <li>使用搜索功能查找特定内容</li>
            </ol>
          </div>
        </section>
      </div>
    </el-drawer>
  </header>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  background-color: #1a1a1a;
  border-radius: 8px;
  margin-bottom: 20px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(45deg, #42b883, #35495e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px;
}

.version {
  font-size: 0.8rem;
  color: #909399;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-content {
  padding: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.help-content {
  font-size: 0.9rem;
}

.help-content h4 {
  margin-top: 16px;
  margin-bottom: 8px;
}

.help-content ul, .help-content ol {
  padding-left: 20px;
  margin-top: 8px;
}

.help-content li {
  margin-bottom: 4px;
}
</style>